import { useState } from 'react'
import styles from './Index.module.css'
import MyNavBar from '../../components/Mynao/Index'
import { useNavigate } from 'react-router-dom'

function Index() {
  const [agreed, setAgreed] = useState(false)
  const nav = useNavigate()

  const handleAgree = () => {
    setAgreed(!agreed)
  }

  const handleConfirm = () => {
    if (agreed) {
      // 处理确认逻辑
      console.log('用户已同意预约须知')
      // 可以在这里添加跳转逻辑
      nav('/yuan')
    }
  }

  return (
    <div className={styles.container}>
      <MyNavBar title="预约须知" />
      
      <div className={styles.content}>
        <div className={styles.section}>
          <h3>一、微信服务号预约范围</h3>
          <p>可预约：普通门诊、专科门诊、专家门诊、特需门诊、中医膏方门诊</p>
          <p>普通门诊、专科门诊患者享有优先权</p>
          <p>专家门诊、特需门诊按预约当日签到顺序就诊</p>
        </div>

        <div className={styles.section}>
          <h3>二、严格实名制</h3>
          <p>预约时需填写真实有效的患者信息，包括姓名、身份证、社保卡、手机号等</p>
          <p>请务必填写真实有效的手机号，以便接收医院通知（如预约成功、停诊等）</p>
        </div>

        <div className={styles.section}>
          <h3>三、预约时间</h3>
          <p>可预约就诊日期前15天至前1天（含周末），23:00前</p>
          <p>服务号每日6:00开放预约号源</p>
        </div>

        <div className={styles.section}>
          <h3>四、预约所需信息</h3>
          <div className={styles.subsection}>
            <h4>1. 实名建档挂号：</h4>
            <p>① 上海医保患者：可通过"添加本人实名医保卡"并激活医保电子凭证快速完成实名建档</p>
            <p>② 自费患者：可在服务号"我的"-"患者管理"中"添加患者"，按提示填写有效信息（姓名、身份证号、手机号等），通过身份证验证完成实名建档</p>
            <p>③ 特殊类型人员（如外省医保、退休医保、干部医保、工伤、儿童医保等）：需先按自费卡类型完成实名建档。就诊当日需携带相关就诊卡、身份证等有效证件到医院人工窗口进行实名建档确认</p>
          </div>
          <div className={styles.subsection}>
            <h4>2. 绑定就诊卡：</h4>
            <p>完成实名建档后，可在服务号"我的"-"患者管理"中选择并绑定对应的就诊卡类型（如社保卡、自费卡等），然后进行预约</p>
          </div>
          <div className={styles.subsection}>
            <h4>3. 多张就诊卡：</h4>
            <p>每个微信账号可绑定多张（最多6张）就诊卡，方便为他人预约（非首次就诊）</p>
          </div>
          <div className={styles.subsection}>
            <h4>4. 确认信息：</h4>
            <p>预约前请务必确认当前预约的就诊卡信息是否正确</p>
          </div>
          <div className={styles.subsection}>
            <h4>5. 有效手机号：</h4>
            <p>患者需填写真实有效的手机号，以便接收医院短信通知</p>
          </div>
        </div>

        <div className={styles.section}>
          <h3>五、现场确认</h3>
          <div className={styles.subsection}>
            <h4>1. 首次就诊患者：</h4>
            <p>就诊当日需携带原始（或复印件）有效证件（身份证、户口本等）及相关就诊卡到人工窗口进行挂号确认，然后签到、取号、候诊</p>
            <p className={styles.note}>【注意】特殊类型就诊卡（如外省医保、退休医保、干部医保、工伤、儿童医保等），首次窗口挂号确认后，需在手机服务号"我的"-"患者管理"中重新绑定相关就诊卡，并解绑首次建档预约时使用的自费卡，以确保后续预约顺畅</p>
          </div>
          <div className={styles.subsection}>
            <h4>2. 复诊患者：</h4>
            <p>就诊当日应在规定时间内持预约时绑定的就诊卡（上海本地医保卡、自费卡）到医院门诊部自助机签到取号。特殊类型（如外省医保、退休医保、干部医保、工伤、儿童医保等）需到人工窗口签到取号。取号后按打印凭条提示到对应候诊区候诊</p>
          </div>
          <div className={styles.subsection}>
            <h4>3. 信息不符：</h4>
            <p>如无法提供有效身份证明，或提供信息与患者不符，将取消预约号源，现场无法修改身份信息</p>
          </div>
          <div className={styles.subsection}>
            <h4>4. 医生停诊/变更：</h4>
            <p>如专家停诊或变更，医院将尽快通过短信通知已预约患者。建议患者就诊前查看手机短信</p>
          </div>
        </div>

        <div className={styles.section}>
          <h3>六、预约取消规则</h3>
          <p>1. 微信服务号预约：微信服务号预约成功后，如无法就诊，可在"我的预约"中在线取消，就诊前一日23:30前（含周末）。中医膏方预约需到医院现场处理</p>
          <p>2. 现场预约：可提前2个工作日拨打0000-666666取消（8:00-11:00、13:00-16:00）</p>
          <p>3. 其他第三方平台预约：可拨打平台电话或按平台在线说明取消</p>
        </div>

        <div className={styles.section}>
          <h3>七、爽约规则</h3>
          <p>预约成功但未按预约时间就诊视为爽约。爽约将记录并影响个人信用</p>
          <p>90个自然日内累计爽约3次及以上将被列入黑名单，自第3次爽约起90个自然日内暂停预约资格</p>
        </div>
      </div>

      <div className={styles.bottomSection}>
        <div className={styles.checkboxContainer}>
          <input 
            type="checkbox" 
            id="agree" 
            checked={agreed} 
            onChange={handleAgree}
            className={styles.checkbox}
          />
          <label htmlFor="agree" className={styles.checkboxLabel}>
            我已阅读并同意须知
          </label>
        </div>
        <button 
          className={`${styles.confirmButton} ${agreed ? styles.enabled : styles.disabled}`}
          onClick={handleConfirm}
          disabled={!agreed}
        >
          我已阅读并同意须知
        </button>
      </div>
    </div>
  )
}

export default Index
